<template>
<div>
        门店名称:<input type="text" v-model="sname">
        门店状态:<select v-model="sstate">
            <option :value="0">--请选择--</option>
            <option :value="1">正常</option>
            <option :value="2">停业</option>
      
        </select>
    <input type="button" value="查询" @click="getsname">
</div>

   <table  class="table-bordered" border="1">
    <thead>
        <tr>
            <td>
                <input type="checkbox" v-model="shopAllcheck" @change="ShopAll">
            </td>
            <td>门店编号</td>
            <td>门店名称</td>
            <td>分店名称</td>
            <td>门店地址</td>
            <td>门店电话</td>
            <td>门店状态</td>
            <td>门店介绍</td>
            <td>入住须知</td>
            <td>交通信息</td>
            <td>门店图片</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
         <tr v-for="item in shop">
             <td>
                <input type="checkbox" :checked="IsShopcheck" :value="item.shop_Id" v-model="ReverShopcheck" @change="ReverShop">
            </td>
            <td>{{ item.shop_Id }}</td>
            <td>{{ item.shop_Name }}</td>
            <td>{{ item.shop_BranchName }}</td>
            <td>{{ item.shop_Address }}</td>
            <td>{{ item.shop_Phone.substring(0,3)+"****"+item.shop_Phone.substring(7) }}</td>
            <td>{{ item.shop_State?"营业":"停业" }}</td>
            <td>{{ item.shop_Info }}</td>
            <td>{{ item.shop_Notice }}</td>
            <td>{{ item.shop_Tarffic }}</td>
            <td><img :src="item.shop_Img"  style="width: 100px;height: 100px"></td>
            <td>
                <a href="#" @click="deleteshop(item.shop_Id)" style="margin-right: 10px">删除</a>
                <a href="#" @click="UpSqlshop(item.shop_Id)">修改</a>
            </td>
        </tr>
    </tbody>
   </table>
   <span>
    当前共{{ page.totalCount }}条数据，每页显示{{ page.pageIndex }}/{{page.pageCount}}条数据，共有{{ page.pageSize }}页
   </span>
  <div>
     <a href="#" @click="Getpage('首页')" style="margin-right: 10px">首页</a>
   <a href="#" @click="Getpage('上一页')" style="margin-right: 10px">上一页</a>
   <a href="#" @click="Getpage('下一页')" style="margin-right: 10px">下一页</a>
   <a href="#" @click="Getpage('尾页')" style="margin-right: 10px">尾页</a>
  </div>
  <div>
    <input type="button" value="批删" @click="GetInfo">
</div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'


// 引入仓库
import {useMemberStore} from'../../stores/counter'

// 创建仓库实例
// const mStore = useMemberStore()

// alert(mStore.MemberId)

const router = useRouter()
onMounted(() => {
    ShowShop()
})

//创建门店响应式数据
const shop:any = ref([{
  shop_Id: 0,
  shop_Name: "",
  shop_BranchName: "",
  shop_Address: "",
  shop_Phone: "",
  shop_State: true,
  shop_Info: "",
  shop_Notice: "",
  shop_Tarffic: "",
  shop_Img: "",
}]);

// 全选
const shopAllcheck = ref(false)

const IsShopcheck=ref(false)


const ReverShopcheck = ref([])

// 全选
const ShopAll = () => {
   
    if (shopAllcheck.value) {
        IsShopcheck.value = true;
       ReverShopcheck.value =shop.value.map((item: any) => {
            return item.shop_Id  //返回门店id
       })
        // alert(ReverShopcheck.value)
    }
    else {
        IsShopcheck.value = false
        // 清空数组
        ReverShopcheck.value = []
    }
}

// 反选
const ReverShop = () => {
    if (ReverShopcheck.value.length == shop.value.length) {
        shopAllcheck.value=true
    }
    else {
        shopAllcheck.value=false
    }
}


// 创建分页响应式数据
const page = ref({
    pageIndex: 1, //当前页码
    pageSize: 2,//每页显示条数
    totalCount: 0,  //总条数
    pageCount: 0//总页数
})
const sname=ref("")
const sstate=ref(0)
// 显示门店
const ShowShop = () => {
    axios.get('https://localhost:7071/api/Shop/ShowShop', {
        params: {
            sname: sname.value,
            state:sstate.value,
            pageIndex: page.value.pageIndex,
            pageSize:page.value.pageSize,
        }
    })
        .then((res) => {
        // console.log(res.data);
            shop.value = res.data.pageDate,
            page.value.totalCount = res.data.totalCount,
            page.value.pageCount=res.data.pagelCount



    })
        .catch(err => {
            console.log(err);
    })
}

// 删除
const deleteshop = (s_id:number) => {
    axios.delete('https://localhost:7071/api/Shop/DeleteShop', {
        params: {
          sid:s_id  
        }
    })
    .then((res) => {
        if (res.data > 0) {
            alert('删除成功')
            router.push('/ShowShopView')
        }
        else {
             alert('删除失败')
        }
    })
    .catch(err => {
        console.log(err);
    })
}

// 尾、首、上、下页
const Getpage = (ch:string) => {
    switch (ch) {
        case '首页':
            page.value.pageIndex = 1
            break;
        case '上一页':
            if (page.value.pageIndex > 1) {
                page.value.pageIndex--
            }
            else {
                alert('已经是首页了')
            }
            break;
        case '下一页':
            if (page.value.pageIndex < page.value.pageCount) {
                page.value.pageIndex++
            }
            else {
                alert('已经是尾页了')
            }
            break;
        case '尾页':
            page.value.pageIndex = page.value.pageCount;
            break;
            
    }

    ShowShop();
}

// 跳转指定页面
const UpSqlshop = (sid:number) => {
    router.push({
        name: "UpShopView",
        params: {
            shopId:sid
        }
    })
}

// 查询门店名称
const getsname = () => {
    axios.get('https://localhost:7071/api/Shop/ShowShop', {
          params: {
            sname: sname.value,
            state:sstate.value,
            pageIndex: page.value.pageIndex,
            pageSize:page.value.pageSize,
        }
    })
        .then((res) => {
           shop.value = res.data.pageDate,
            page.value.totalCount = res.data.totalCount,
            page.value.pageCount=res.data.pagelCount

        })
   
}


const GetInfo = () => {
    axios.get('https://localhost:7071/api/Shop/DelShopState', {
        params: {
            Idstring:ReverShopcheck.value.toString()
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert('逻辑删除成功');
                ShowShop();
            }
            else {
            alert('逻辑删除失败');
        }
    })
}
</script>

<style scoped>

</style>